import React, { Component } from 'react'
import Register_container from '../../../../containers/Register_container'
import Enroll from '../components/login/Enroll'
import loginBackGround from '../../../../images/loginPage.jpg'
import '../componentStyle/loginPage.scss'

import store from '../../../../redux/store'
import { Provider } from 'react-redux'

export default class loginPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            screenHeight: window.innerHeight,
            reversalIndex: 0 // 0代表登录界面，1代表注册界面
        }
    }

    // 事件监听，如果屏幕大小改变，立即改变screenHeight，并且触发媒体查询
    componentWillMount() {
        window.addEventListener('resize', function (e) {
            const screenHeight = e.target.innerHeight;
            this.setState({
                screenHeight: screenHeight
            })
        }.bind(this));
    }

    enterEnroll = () => {
        this.setState({
            reversalIndex: 1
        });
    }

    enterRegister = () => {
        this.setState({
            reversalIndex: 0
        });
    }

    render() {
        return (
            <div style={{
                height: this.state.screenHeight,
                background: "url(" + loginBackGround + ") no-repeat center center fixed",
                backgroundSize: 'cover'
            }}>
                <div
                    className={this.state.reversalIndex === 0 ? "element" : 'element middle-flip'}
                >
                    <div style={{
                        color: '#fff',
                        textAlign: 'center',
                        fontSize: 34,
                        marginBottom: 20,
                        width: 400
                    }}>
                        TECH F5VE
                    </div>
                    <div className='front'>
                        <Provider store={store}>
                            <Register_container history={this.props.history} enterEnroll={this.enterEnroll} />
                        </Provider>
                    </div>
                    <div className='back'>
                        <Enroll history={this.props.history} enterRegister={this.enterRegister} />
                    </div>
                </div>
            </div>
        )
    }
}
